<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
  <head>
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>关于循环中索引的使用 - by 杨元</title>
  </head>
  <body>
    <h1>关于循环中索引的使</h1>
    <!--基础html框架-->
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody id="tableList">
      <tbody id="tableList2">
      </tbody>
      </tbody>
    </table>
    
    <!--插件引用-->
    <script type="text/javascript" src="/easylife/Public/Home/js/zepto.min.js"></script>
    <script type="text/javascript" src="/easylife/Public/Home/js/handlebars.js"></script>
    
    <!--Handlebars.js模版-->
    <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
    <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
    <script id="table-template" type="text/x-handlebars-template">
      
      {{#each this}}
      {{#if sex}}
       <tr>
        <td>{{tests @index}}</td>
        <td>{{name}}</td>
        <td>{{sex}}</td>
        <td>{{age}}</td>
         <td>
             {{#with favorite}}
               {{#each this}}
                 <p>{{this}}</p>
               {{/each}}
             {{/with}}
           </td>
      </tr>
      {{/if}}
      {{/each}}
    </script>
    
    <!--进行数据处理、html构造-->
    <script type="text/javascript">
      $(document).ready(function() {
        //模拟的json对象
         var data = {
                      "student": [
                          {
                              "name": "张三",
                              "sex": "0",
                              "age": 18
                          },
                          {
                              "name": "李四",
                              "sex": "0",
                              "age": 22
                          },
                          {
                              "name": "妞妞",
                              "sex": "1",
                              "age": 19
                          }
                      ]
                  };

          var testData = 
                        [
                          {
                           
                            "name":"饶大奇",
                            "age":"21",
                            "sex":"0",
                             "favorite":
                            {
                               "name":"唱歌"
                             }
                          },
                          {
                            "name":"江磊",
                             "age": 22,
                             "favorite":
                            [
                               {
                                "name":"上网"
                              },{
                                 "name":"足球"
                                }
                              ]
                          }
                        ];

         // alert(testData[0][name]);
          console.log(testData[0].name);
          console.log(data.student[0].name);

        
        //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
        //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
        var myTemplate = Handlebars.compile($("#table-template").html());
        
        //注册一个Handlebars Helper,用来将索引+1，因为默认是从0开始的
        Handlebars.registerHelper("tests",function(index,options){
          this._index = parseInt(index)+1;
          return  this._index;
        });
        
        //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
        //$('#tableList').html(myTemplate(data));
        $('#tableList2').html(myTemplate(testData));
      });
    </script>
  </body>
</html>